<template>
  <div
    :style="{
      height: '530px',
      background: `url(${path}) no-repeat center center`,
    }"
  >
    <div class="tabs">
      <el-radio-group
        v-model="tabValue"
        style="margin: 20px auto"
        @change="onChangeTab"
      >
        <el-radio-button
          v-for="item in tabList"
          :key="item.value"
          :label="item.value"
          >{{ item.label }}
        </el-radio-button>
      </el-radio-group>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const path = ref("");
const tabValue = ref("1");
const tabList = [
  {
    label: "楼房",
    value: "1",
  },
  {
    label: "关于我们",
    value: "2",
  },
  {
    label: "租好房",
    value: "3",
  },
  {
    label: "新闻资讯",
    value: "4",
  },
  {
    label: "商务合作",
    value: "5",
  },
];

const onChangeTab = (value) => {
  // 静态资源动态引入，打包生成文件指纹
  // import(`../../assets/images/${value}.png`).then((res) => {
  //    path.value = res.default;
  // });
  const url = new URL(`../../assets/images/${value}.png`, import.meta.url);
  path.value = url.pathname;
};
onChangeTab(tabValue.value);
</script>

<style lang="scss" scoped>
.tabs {
  text-align: center;
}
</style>
